<template>
  <div class="parent">
    <echartsDom v-if="isShowEcharts" :width="width" :height="height" :option="option" />
    <div v-else>
      <px-empty :image-size="50" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, ref } from "vue";
import echartsDom from "./echartsDom.vue";
import { queryConsumeChartForDay } from "@/api/waterKanban";
const props = defineProps({
  width: {
    type: String,
    default: ""
  },
  height: {
    type: String,
    default: ""
  },
  color: {
    type: String,
    default: "#3B82F6"
  }
});
const isShowEcharts = ref(false);
const state = reactive({
  option: {}
});
const { option } = toRefs(state);
const getoptions = () => {
  // queryConsumeChartForDay({ dictKey: "UPW02", day: 7 }).then((response: any) => {
  //   console.log(response);
  //   isShowEcharts.value = true;

  // });
  isShowEcharts.value = true;
  option.value = {
    tooltip: {
      trigger: "item",
      triggerOn: "mousemove"
    },
    series: {
      type: "sankey",
      layout: "none",
      emphasis: {
        focus: "adjacency"
      },
      data: [
        {
          name: "总量"
        },
        {
          name: "下级"
        },
        {
          name: "类别一"
        },
        {
          name: "类别二"
        },
        {
          name: "a1"
        },
        {
          name: "a2"
        }
      ],
      links: [
        {
          source: "总量",
          target: "下级",
          value: 8
        },
        {
          source: "下级",
          target: "类别一",
          value: 5
        },
        {
          source: "下级",
          target: "类别二",
          value: 3
        },
        {
          source: "类别一",
          target: "a1",
          value: 5
        },
        {
          source: "类别二",
          target: "a2",
          value: 3
        }
      ]
    }
  };
};
getoptions();
</script>

<style scoped lang="scss">
.parent {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>
